<template>
  <div id="app">
    <swiper :slides-per-view="1" 
      @slideChange="onSlideChange"   
      direction="vertical"
      auto-height
      ref="swiper"
      >
      <swiper-slide name="index">
        <Index></Index>
      </swiper-slide>
      <swiper-slide name="user" class="user">
        <User></User>
      </swiper-slide>
    </swiper>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import {ref,onMounted} from 'vue'
import {useRouter} from 'vue-router'
import "swiper/css";
import Index from "./pages/index.vue";
import User from "./pages/UserData.vue";
// const swiper = ref(null)
const router = useRouter()
const onSlideChange = () => {
  console.log("滑动了");
};
// const SlideChange=()=>{
//   const active = swiper.value.swiper.activeIndex;
//   console.log(active);
//   if(active===0){
//     router.push('/index')
//   }else if(active===1){
//     router.push('/user')
//   }
// }
// onMounted(()=>{
//   swiper.value=new Swiper('.swiper',{
//     on:{
//       slideChange:SlideChange
//     }
//   });
// })
</script>

<style  scoped>
* {
  margin: 0;
  padding: 0;
}
</style>